.widget-section {
  position: relative;
  padding: 7rem 0;
  &.primary {
    background-color: $bgPrimary;
    .divider-color {
      fill: $bgSecondary;
    }
  }
  &.secondary {
    background-color: $bgSecondary;
    .divider-color {
      fill: $bgPrimary;
    }
  }

  .widget-section-divider {
    position: absolute;
    left: calc((3840px - 100vw) / -2);
    &.top {
      top: 0;
      &.mirrorX {
        transform: scaleX(-1) scaleY(1);
      }
      &.mirrorY {
        transform: scaleX(-1) scaleY(-1);
      }
      &.mirrorXY {
        transform: scaleX(1) scaleY(-1);
      }
    }
    &.bottom {
      bottom: 0;
      &.mirrorX {
        transform: scaleX(-1) scaleY(-1);
      }
      &.mirrorY {
        transform: scaleX(-1) scaleY(1);
      }
      &.mirrorXY {
        transform: scaleX(1) scaleY(-1);
      }
    }
  }
}

.widget-section {
  position: relative;
  &.bg-circuit {
    &.primary {
      background-image: url("../images/CircuitL.svg"),
        url("../images/CircuitR.svg");
    }
    background-position: right 85vw top 0, left 85vw top -4rem;
    background-repeat: no-repeat, no-repeat;
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  a:not(.btn) {
    text-decoration: none;
    background-color: #dddddd;
    border-bottom: 1px solid #444444;
    padding: 0 0.25rem 0.1rem 0.25rem;
    &:hover {
      text-decoration: none;
      background-color: #cccccc;
      border-bottom: 1px solid #333333;
    }
  }

  a[target="_blank"]:after {
    content: " \f35d";
    color: $primary;
    font-family: "Font Awesome 5 Free";
    font-size: 1rem;
  }

  .row > .column {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  .row.full > .column {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.half-half > .column {
    flex: 0 0 100%;
    max-width: 100%;
    @include media-breakpoint-up(lg) {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  .row.quarter-quarter-half {
    > .column:nth-child(3n + 1) {
      flex: 0 0 50%;
      max-width: 50%;
      @include media-breakpoint-up(lg) {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }
    > .column:nth-child(3n + 2) {
      flex: 0 0 50%;
      max-width: 50%;
      @include media-breakpoint-up(lg) {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }
    > .column:nth-child(3n + 3) {
      flex: 0 0 100%;
      max-width: 100%;
      @include media-breakpoint-up(lg) {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }
  }
  .row.third-third-third > .column {
    flex: 0 0 100%;
    max-width: 100%;
    @include media-breakpoint-up(lg) {
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }
  }
  .row.quarter-quarter-quarter-quarter > .column {
    flex: 0 0 100%;
    max-width: 100%;
    @include media-breakpoint-up(lg) {
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
}
